<template>
  <div class="project-selection-container">
    <h1>项目选题管理</h1>
    <hr>
    <div class="selection-panel">
      <div class="left-panel">
        <label>项目选题：</label>
        <el-select v-model="selectedProject" placeholder="请选择项目选题" @change="handleSelectionChange" style="width: 240px;">
          <el-option
            v-for="project in projects"
            :key="project.id"
            :label="project.topic"
            :value="project.id"
          ></el-option>
        </el-select>
      </div>
      <div class="right-panel">
        <el-button type="primary" @click="createNewProject">创建新的项目选题</el-button>
      </div>
    </div>
    <div class="project-info-container">
      <el-scrollbar class="project-info-scroll">
        <div v-if="selectedProjectInfo" class="project-info">
          <el-row>
            <el-col :span="6">
              <el-avatar shape="square" :size="250" :src="avatarSrc" ></el-avatar>
            </el-col>
            <el-col :span="18">
              <h2 class="project-title">{{ selectedProjectInfo.topic }}</h2>
              <p class="project-description">{{ selectedProjectInfo.description }}</p>
            </el-col>
          </el-row>
          <el-row>
            <h3 class="task-header">项目基础任务:</h3>
          </el-row>
          <el-row class="task-list">
            <div class="task-card" v-for="task in selectedProjectInfo.tasks" :key="task.id" @click="goToTaskDetail(task)">
              <span class="task-name">{{ task.name }}</span>
              <span class="task-description">{{ task.description }}</span>
            </div>
          </el-row>
        </div>
        <div v-else class="empty-message">
          <p>尚未选择项目选题。</p>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
import axios from 'axios';
const router = useRouter()

const avatarSrc = require('@/assets/headpic.jpg')

const projects = ref([
  
])

const selectedProject = ref(null)
const selectedProjectInfo = ref(null)

const handleSelectionChange = (value) => {
  selectedProjectInfo.value = projects.value.find(project => project.id === value)
}

const createNewProject = () => {
  router.push({ name: 'topic-create' })
}

const goToTaskDetail = (task) => {
  console.log(task)
  router.push({ name: 'task-detail', query: { task: JSON.stringify(task) } })
}

onMounted(async () => {
  const projectTopic = await axios.get('http://localhost:8080/project_topics/getAll')
  projects.value = projectTopic.data
  console.log(projectTopic.data)  
})
</script>

<style scoped>
.project-selection-container {
  padding: 40px;
  margin: auto;
  height: 100%;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-weight: 700;
}

.selection-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.project-info-container {
  margin-top: 20px;
  height: 450px; /* 设置容器的固定高度 */
  border: 1px solid #ddd; /* 可选：添加边框使其更明显 */
}

.project-info-scroll {
  height: 100%; /* 确保滚动条覆盖整个容器高度 */
  overflow: auto; /* 允许内容溢出时出现滚动条 */
}

.project-info {
  padding: 20px;
}

.project-title, .project-description {
  text-align: left;
  margin: 10px;
}

.task-header {
  font-weight: bold;
  margin-top: 20px;
}

.empty-message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  font-weight: bold;
  color: gray;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

.task-card {
  background: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-name {
  font-weight: bold;
  margin-bottom: 5px;
  text-align: left;
}

.task-description {
  color: #666;
  text-align: left;
}
</style>
